﻿<template>
  <div class="details-order-info base-card">
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name" :label="tab.label" />
    </el-tabs>
    <OrderInfo v-if="activeName === 'order-info'" @open-progress="onOpenProgress" />
    <StepDrawer v-model="showDrawer" :drawer-width="'30%'" :page-size="20" />
  </div>
</template>

<script setup>
  import OrderInfo from "./orderInfo/index.vue";
  import StepDrawer from "./StepDrawer.vue";
  // 打开订单进度（按需接入实际逻辑）
  const showDrawer = ref(false);
  const activeName = ref("order-info");
  const tabs = ref([
    { name: "order-info", label: "订单信息" },
    { name: "risk-report", label: "风控报告" },
    { name: "credit-report", label: "征信报告" },
    { name: "deposit-manage", label: "押金管理" },
    { name: "notary-manage", label: "公证管理B" },
    { name: "bill-info", label: "账单信息" },
    { name: "bank-card", label: "代扣银行卡" },
  ]);
  // 子组件事件处理
  function onOpenProgress() {
    showDrawer.value = true;
  }
</script>
<style lang="scss" scoped>
  :deep(.el-drawer__body) {
    overflow: hidden !important;
  }
  .details-order-info {
    border-radius: 12px;
    padding: 12px 24px;
    background-color: var(--bg);
    margin-top: 16px;
  }
</style>
